<template>  
    <div class="video-player">  
      <video  
        ref="videoPlayer"  
        :src="videoSource"  
        @play="onPlay"  
        @pause="onPause"  
        @ended="onEnded"  
        controls  
      >  
        您的浏览器不支持HTML5视频标签。  
      </video>  
    </div>  
  </template>  
  <script>  
  export default {  
    name: 'VideoPlayer',  
    props: {  
      videoSource: {  
        type: String,  
        required: true  
      }  
    },  
    methods: {  
      onPlay() {  
        console.log('视频开始播放');  
      },  
      onPause() {  
        console.log('视频暂停');  
      },  
      onEnded() {  
        console.log('视频播放结束');  
      }  
    }  
  };  
  </script>  
   
  <style scoped>  
  .video-player {  
    max-width: 100%;  
    margin: 0 auto;  
  }  
  video {  
    width: 100%;  
    height: auto;  
  }  
  </style>